<template>
  <div>
    <!-- 导航条区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 列表区域 -->
    <el-card>
      <el-table :data="rightsList"
                border
                stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="authName"
                         label="权限名称">
        </el-table-column>
        <el-table-column prop="path"
                         label="路径">
        </el-table-column>
        <el-table-column prop="level"
                         label="权限等级">
          <template slot-scope="scope">
            <el-tag v-if='scope.row.level==="0"'
                    type="success">等级一</el-tag>
            <el-tag v-else-if='scope.row.level==="1"'
                    type="warning">等级二</el-tag>
            <el-tag v-else-if='scope.row.level==="2"'
                    type="danger">等级三</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      rightsList: []
    }
  },
  created () {
    this.getRightslist()
  },
  methods: {
    getRightslist: function () {
      const that = this
      this.$http.get('rights/list').then(
        function (response) {
          if (response.data.meta.status !== 200) {
            return that.$message.error('获取用户列表失败')
          }
          that.rightsList = response.data.data
          console.log(that.rightsList)
        }, function (err) {
          console.log(err)
        }
      )
    }
  }
}
</script>
<style lang="less" scoped>
.el-card {
  margin-top: 10px;
  line-height: 0;
}
</style>
